<template>
    <view class="wrapper">
        <view class="Title">兑换成功</view>
        <!-- <view class="Card" :style="{ backgroundImage: 'url(' + headImg + ')' }">
            <view class="CardInfo">
                <image :src="headImg" mode="aspectFill" class="CardInfo-logo"></image>
                <view class="d-flex f-column">
                    <text class="white size34">卡片名称卡片名</text>
                    <text class="white size26 m-top8">2025年9月15日到期</text>
                </view>
            </view>
            <view class="row">
                <view class="frequency">
                    <text class="frequency-txt">剩余</text>
                    <text class="frequency-Num">6</text>
                    <text class="frequency-txt">次</text>
                </view>
            </view>
        </view> -->

        <view class="securities">
            <view class="imgBox">
                <image :src="headImg" mode="aspectFit" class="Coplle"></image>
            </view>
            <view class="securitiesBox">
                <view class="d-flex f-column">
                    <text class="ellipsis color_33 size34">XXX优惠券</text>
                    <text class="ellipsis color_33 size28 m-top4">摘要摘要摘要摘要摘要摘要摘要</text>
                </view>
                <text class="color size34">9折扣</text>
            </view>
        </view>

        <view class="Continue">
            <view class="Continue-list bg_wechat" @click.stop="Close">继续兑换</view>
            <view class="Continue-list bgcolor" @click="myBag">我的卡包</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG'
            }
        },
        methods: {
            Close() {
                this.$emit('Close')
            },
            myBag() {
                this.Close()
                this.toUrl(`/subCard/cardBag`)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .wrapper {
        width: 690rpx;
        padding: 10rpx 10rpx 20rpx 10rpx;
        .Title {
            width: 100%;
            padding: 20rpx;
            display: flex;
            justify-content: center;
            color: #000;
            font-size: 36rpx;
            font-weight: bold;
        }
        .Card {
            width: 100%;
            height: 300rpx;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            border-radius: 10rpx;
            padding: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .CardInfo {
                display: flex;
                align-items: center;
                &-logo {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }
            .frequency {
                padding: 4rpx 16rpx;
                background-color: rgba(0, 0, 0, 0.5);
                color: #ffffff;
                font-size: 26rpx;

                &-txt {
                    font-size: 26rpx;
                }
                &-Num {
                    font-size: 34rpx;
                    margin: 0 4rpx;
                }
            }
        }

        .securities {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 20rpx;
            .imgBox {
                width: 200rpx;
                height: 200rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20rpx;
            }
            &Box {
                height: 180rpx;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }

        .Continue {
            width: 100%;
            display: flex;
            margin-top: 20rpx;
            border-radius: 10rpx;
            overflow: hidden;
            &-list {
                flex: 1;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                font-size: 28rpx;
            }
        }
    }
</style>
